<template>
  <div class="my-page-container">
    <div class="bg-white">
      <AmyQueryComboxItem
        :search-type-arr="scaVariableList"
        search-label="变量名称"
        @make-search-condition="queryTable"
      />
    </div>
    <div class="my-chart-page">
      <ChartCurveItem/>
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted, reactive } from 'vue';
import { CQueryParam } from 'components/basic/basicModel';
import { useCatalogTool } from 'src/hook/common/useCatalogTool';
import { useScaCatalogTbl } from 'src/hook/useScaCatalogTbl';
import { scaCatalogType } from 'src/util/ScaBaseConst';

const ChartCurveItem = defineAsyncComponent(() => import('./ChartCurveItem.vue'));
const AmyQueryComboxItem = defineAsyncComponent(() => import('components/basic/AmyQueryComboxItem.vue'));
export default defineComponent({
  name: 'ChartIndex',
  components: {
    AmyQueryComboxItem,
    ChartCurveItem
  },
  setup (props, context) {
    //*********************************************************************************************
    //      查询模块
    //*********************************************************************************************
    //查询输入参数
    let queryParam = reactive({
      name: '',
      startDate: '',
      endDate: ''
    });

    //有条件查询
    const queryTable = (s: CQueryParam) => {
      queryParam.name = s.name;
      queryParam.startDate = s.startDate;
      queryParam.endDate = s.endDate;
    }

    //*********************************************************************************************
    //      目录管理
    //*********************************************************************************************
    const {
      findCatalogLabel
    } = useCatalogTool();

    const {
      scaVariableList,
      getScaCatalog,
      removeScaCatalog
    } = useScaCatalogTbl();

    //*********************************************************************************************
    //      启动模块
    //*********************************************************************************************
    //加载组件
    onMounted(() => {
      //读取目录
      getScaCatalog(scaCatalogType.VARIABLE_CODE);
    });

    //卸载组件
    onUnmounted(() => {
      //删除目录
      removeScaCatalog(scaCatalogType.VARIABLE_CODE);
    })

    return {
      scaVariableList,

      queryTable
    }
  }
})
</script>

<style scoped>
.my-page-container {
  .my-chart-page {
      height: 80vh;
    }
}
</style>
